<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<!--onsubmit事件必须写在form表单中,接收一个布尔类型的返回值,-->
<form action="#" method="get" onsubmit="return submitfun()">
  姓&nbsp&nbsp名:<input type="text" name="uname" placeholder="请输入姓名:"><span></span><br/>
  密&nbsp&nbsp码:<input type="password" name="pwda" placeholder="请输入密码:"><span></span><br/>
  确认密码:<input type="password" name="pwdb" placeholder="请再次输入密码:"><span></span><br/>
  邮&nbsp&nbsp箱:<input type="text" name="uemail" placeholder="请输入邮箱:"><span></span><br/>
  <input type="submit">
</form>
<script>
  // 姓名验证
  // 光标移出事件绑定
  var uname = document.getElementsByName("uname")[0];
  uname.onblur = function (ev) {
    var nameval = uname.value.trim();
    var spanName = document.getElementsByTagName("span")[0];
    namefun(nameval, spanName);
  };

  function namefun(username, spanname) {
    // 1.姓名不能为空
    if (username == "") {
      // if (username.length==0){
      spanname.innerText = "*姓名不能为空!!!";
      spanname.style.color = "red";
      uname.style.border = "1px solid red";
      // uname.style.borderColor="red";
      return false;
    }
    // 2.姓名中不能含有数字
    for (var i = 0; i < username.length; i++) {
      if (!isNaN(username[i])) {
        spanname.innerText = "*姓名中不能含有数字!!!";
        uname.select();
        /*spanname.style.color="red";
        uname.style.border="1px solid red";*/
        return false;
      }
    }

    spanname.innerText = "Right!!!";
    spanname.style.color = "black";
    uname.style.border = "1px solid gray";
    return true;
  }

  // 密码验证
  var pwda = document.getElementsByName("pwda")[0];
  pwda.onblur = function (ev) {
    var pwdaval = pwda.value.trim();
    var spanPwda = document.getElementsByTagName("span")[1];
    pwdafun(pwdaval, spanPwda);
  };

  function pwdafun(userpwda, spanpwda) {
    // 1.密码必须在6-18位数字之间
    if (userpwda.length < 6 || userpwda.length > 18) {
      // if (!(userpwda>=6&&userpwda<=18)){
      spanpwda.innerText = "*密码必须在6-18位数字之间!!!";
      spanpwda.style.color = "red";
      pwda.style.border = "1px solid red";
      // pwda.style.borderColor="red";
      return false;
    }

    spanpwda.innerText = "Right!!!";
    spanpwda.style.color = "black";
    pwda.style.border = "1px solid gray";
    return true;
  }

  // 第2次密码验证
  var pwdb = document.getElementsByName("pwdb")[0];
  pwdb.onblur = function (ev) {
    var pwdaval = pwda.value.trim();
    var pwdbval = pwdb.value.trim();
    var spanPwdb = document.getElementsByTagName("span")[2];
    pwdbfun(pwdaval, pwdbval, spanPwdb);
  };

  function pwdbfun(userpwda, userpwdb, spanpwdb) {
    // 1.密码必须在6-18位数字之间
    if (userpwdb.length < 6 || userpwdb.length > 18) {
      // if (!(userpwdb>=6&&userpwdb<=18)){
      spanpwdb.innerText = "*密码必须在6-18位数字之间!!!";
      spanpwdb.style.color = "red";
      pwdb.style.border = "1px solid red";
      // pwdb.style.borderColor="red";
      // pwdb.select();
      return false;
    }
    // 2.两次密码必须相同
    if (userpwda !== userpwdb) {
      spanpwdb.innerText = "*两次密码必须相同!!!";
      spanpwdb.style.color = "red";
      pwdb.style.border = "1px solid red";
      pwdb.select();
      return false;
    }
    spanpwdb.innerText = "Right!!!";
    spanpwdb.style.color = "black";
    pwdb.style.border = "1px solid gray";
    return true;
  }

  // 邮箱验证
  var uemail = document.getElementsByName("uemail")[0];
  uemail.onblur = function (ev) {
    var emailval = uemail.value.trim();
    var spanEmail = document.getElementsByTagName("span")[3];
    emailfun(emailval, spanEmail);
  };

  function emailfun(useremail, spanemail) {
    // 1.邮箱不能为空
    if (useremail == "") {
      // if (useremail.length==0){
      spanemail.innerText = "*邮箱不能为空!!!";
      spanemail.style.color = "red";
      uemail.style.border = "1px solid red";
      // uemail.style.borderColor="red";
      return false;
    }
    // 2.邮箱中必须含有@.
    if (useremail.indexOf("@") == -1) {
      spanemail.innerText = "*邮箱中必须含有@.!!!";
      uemail.select();
      spanemail.style.color = "red";
      uemail.style.border = "1px solid red";
      return false;
    }
    // 2.邮箱中必须含有@.
    if (useremail.indexOf(".") == -1) {
      spanemail.innerText = "*邮箱中必须含有@.!!!";
      uemail.select();
      spanemail.style.color = "red";
      uemail.style.border = "1px solid red";
      return false;
    }
    spanemail.innerText = "Right!!!";
    spanemail.style.color = "black";
    uemail.style.border = "1px solid gray";
    return true;
  }

  function submitfun() {
    // 1.得到姓名,密码,第2次密码,邮箱的参数
    var nameval = uname.value.trim();
    var spanName = document.getElementsByTagName("span")[0];

    var pwdaval = pwda.value.trim();
    var spanPwda = document.getElementsByTagName("span")[1];

    var pwdbval = pwda.value.trim();
    var spanPwdb = document.getElementsByTagName("span")[2];

    var emailval = uemail.value.trim();
    var spanEmail = document.getElementsByTagName("span")[3];

    // 2. 判断当前输入框验证是否通过
    if (namefun(nameval, spanName)==false) {
      return false;
    }
    if (pwdafun(pwdaval, spanPwda) == false) {
      return false;
    }
    if (pwdbfun(pwdaval,pwdbval, spanPwdb) == false) {
      return false;
    }
    if (emailfun(emailval, spanEmail) == false) {
      return false;
    }
    return true;
  }
</script>
</body>
</html>
